<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title>表单元素推荐</title>
	<link href="../../theme/style.css" rel="stylesheet" type="text/css" />
	<script src="../../theme/browser.js" type="text/javascript"></script>
</head>
<body>
	<script type="text/javascript" src="js/header.js"></script>
	<h1>表单元素推荐</h1>
	<div class="intro">
		按用户输入项以AJAX从指定URL获取推荐列表<br />
		类型：email, search, text<br />
		兼容：HTML5
	</div>
	<script type="text/javascript" src="js/itabs.js"></script>	

	<h2>属性</h2>
	<div class="program">
		<table>
			<thead>
				<tr>
					<th>&#160;</th>
					<th>属性名</th>
					<th>属性值</th>
					<th>&#160;</th>
					<th>&#160;</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>filter-suggest</td>
					<td>string</td>
					<td>
						读取推荐URL内容<br />
						注意：仅text、password类型支持图标<br />
						名称：请查看<a href="../icon/index.html">参考文档</a>定义
					</td>
					<td><input filter-suggest="suggest.php" type="email" name="suggest" placeholder="请输入邮箱" /></td>
				</tr>
				<tr>
					<td>2</td>
					<td>filter-suggest-callback</td>
					<td>text|value|index|function</td>
					<td>回调方法</td>
					<td></td>
				</tr>
			</tbody>
		</table>
	</div>

	<h2>返回</h2>
	<div class="codeset">
		<code title="Suggest返回格式">// 将返回的TEXT值填充当前表单
<ul>
	<li><a suggest-index="0" suggest-value="选项值1" suggest-text="选项名1" href="javascript:void(0)">选项名1</a></li>
	<li><a suggest-index="1" suggest-value="选项值2" suggest-text="选项名2" href="javascript:void(0)">选项名2</a></li>
	<li><a suggest-index="2" suggest-value="选项值3" suggest-text="选项名3" href="javascript:void(0)">选项名3</a></li>
	<li><a suggest-index="3" suggest-value="选项值4" suggest-text="选项名4" href="javascript:void(0)">选项名4</a></li>
</ul></code>
	</div>

	<h2>示例</h2>
	<div class="codeset">
		<code title="#2：TEXT回调(默认)">// 将选中项的suggest-text的值填充当前表单
// 二例等价
<input filter-suggest="suggest.php" type="email" name="suggest" placeholder="请输入邮箱" />
<input filter-suggest="suggest.php" filter-suggest-callback="text" type="email" name="suggest" placeholder="请输入邮箱" /></code>
	<div class="br"></div>
	<code title="#2：Value回调">// 将选中项的suggest-value的值填充当前表单
<input filter-suggest="suggest.php" filter-suggest-callback="value" type="email" name="suggest" placeholder="请输入邮箱" /></code>
	<div class="br"></div>
	<code title="#3：Index回调">// 将选中项的suggest-index的值填充当前表单(从0开始计算)
<input filter-suggest="suggest.php" filter-suggest-callback="index" type="email" name="suggest" placeholder="请输入邮箱" /></code>
	<div class="br"></div>
	<code title="#4：function回调">// 将选中元素作为参数，调用function方法
// #1, HTML结构
<input filter-suggest="suggest.php" filter-suggest-callback="userfunc" type="email" name="suggest" placeholder="请输入邮箱" />
// #2, 定义方法
<script type="text/javascript">$(document).ready(function(){
	$('[filter-suggest-callback="userfunc"]').data('userfunc', function(input, elem){
		/*!
		* 接受参数
		* @param object input, 当前INPUT元素对象, eg: $('input')
		* @param object elem, 被点击选项对象, eg: $('a')
		*/
		// 以下设置逻辑代码
	});
})</script></code>





	</div>
<script type="text/javascript" src="../../theme/footer.js"></script>
</body>
</html>	